<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')" :close-on-click-modal="false">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" label-width="130" ref="dialogForm">
            花型颜色: {{flower_name}}  {{color_name}} 总米数: {{total}}
            <sc-form-table class="formtable" ref="table" v-model="data" hideAdd hideDelete showIndex placeholder="暂无数据" height="400" show-summary>
                <el-table-column label="序号" align="center" prop="flower" width="80">
                    <template #default="scope">
                        {{scope.row.index}}
                    </template>
                </el-table-column>
                <el-table-column prop="meters" label="米数" align="center">
                    <template #header>
                        <div style="display: flex;align-items: center;justify-content: center;">
                            <el-popover placement="top" :width="200" trigger="click" v-model="popover">
                                <template #reference>
                                    <div @click="getFocus">米数</div>
                                </template>
                                <div style="display: flex;align-items: center;">
                                    <el-input v-model="allMeters" type="number" ref="meterInput" @input="meter_input"></el-input>
                                </div>
                            </el-popover>
                        </div>
                    </template>
                    <template #default="scope">
                        <el-input v-model="scope.row.meters" type="number" @mousewheel.prevent @keydown.up.prevent @keydown.down.prevent style="width: 100%;" @focus="common.inputFocus($event)" @keydown.up="up(scope.$index, 'meters')" @keydown.down="down(scope.$index, 'meters')" :ref="`meters${scope.$index}`" @input="totalComputed(scope.row)"></el-input>
                    </template>
                </el-table-column>
            </sc-form-table>
        </el-form>
        <template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit(0)">保存</el-button>
        </template>
    </el-dialog>
</template>

<script>

export default {
    emits: ['success', 'closed'],
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新增',
                edit: '设置码单',
                show: '查看',
            },
            visible: false,
            isSaveing: false,
            form: {},
            data: [],
            id: "",
            flower_name: "",
            color_name: "",
            total: 0,
            allMeters: "",
        }
    },
    created() {
        // this.meter_input = this.common.debounce(this.meter_input, 1000);
	},
    mounted() {
    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单提交方法
        async submit() {
            let array = []
            this.data.map(item=>{
                array.push({
                    meters: item.meters
                })
            })
            let boj = {
                id: this.id,
                flower: this.flower_name,
                color: this.color_name,
                meter_data: array
            }
            var res = await this.$API.business.dye.house.set_meters.post(boj);
            if (res.code == 1) {
                this.visible = false;
                this.$emit('success', boj, this.mode)
                this.$message.success("操作成功")
            } else {
                this.$alert(res.message, "提示", {type: 'error'})
            }
            // this.visible = false;
            // this.$emit('success', this.data, this.flower_name,this.color_name)
        },
        //表单注入数据
        async setData(row,item,id) {
            this.flower_name = row.flower
            this.color_name = item.prop
            this.id = id
            const count = Number(row[item.prop]);
            // this.data.push(...Array.from({length: count}, (_, i) => ({ index: i + 1, meters: "" })));
            var res = await this.$API.business.dye.house.get_meters.get({flower: row.flower,color: item.prop,id: id});
            if(!res.data.meter_data){
                this.data.push(...Array.from({length: count}, (_, i) => ({ index: i + 1, meters: 0 })));
            }else {
                res.data.meter_data.map((item,index)=>{
                    this.data.push({
                        index: index+1,
                        meters: item.meters
                    })
                })
            }
        },
        // 数量上
        up(index, field) {
            let prevField = ''
            if (index > 0) {
                prevField = this.$refs[`${field}${index-1}`];
            } else {
                prevField = this.$refs[`${field}${this.data.length-1}`];
            }
            prevField.focus();
            setTimeout(() => {
                prevField.select();
            },0)
        },
        // 数量下
        down(index, field) {
            let prevField = ''
            if (index < this.data.length - 1) {
                prevField = this.$refs[`${field}${index+1}`];
            } else {
                prevField = this.$refs[`${field}${0}`];
            }
            prevField.focus();
            setTimeout(() => {
                prevField.select();
            },0)
        },
        // 计算
        totalComputed(){
            let total = 0;
            this.data.map(item=>{
                total = Number(total) + Number(item.meters);
            })
            this.total = (total).toFixed(2);
        },
        meter_input(e){
            this.data.map( item =>{
                item.meters = e
            })
            this.totalComputed();
            // this.allMeters = ""
        },

        getFocus(){
            setTimeout(()=>{ 
                this.$nextTick(()=>{
                    this.$refs.meterInput.focus()
                })
            },100)
        },
    }
}
</script>

<style lang="scss" scoped>
:deep(.el-input input[type="number"]::-webkit-outer-spin-button),   
:deep(.el-input input[type="number"]::-webkit-inner-spin-button) {
   -webkit-appearance: none;
   margin: 0;   
}
   
:deep(.el-input input[type="number"]) {
   -moz-appearance: textfield;
}
:deep(.el-input input[type="number"]::-webkit-outer-spin-button),   
:deep(.el-input input[type="number"]::-webkit-inner-spin-button) {
   -webkit-appearance: none;
   margin: 0;   
}
   
:deep(.el-input input[type="number"]) {
   -moz-appearance: textfield;
}
</style>
